<template>
    <div>
        <el-card>
            <template #header> 编辑菜单 </template>
            <el-form :model="form" :rules="rules">
                <el-form-item v-show="$route.query.id" label="上级菜单（pid）">
                    <el-input v-model="form.pid"></el-input>
                </el-form-item>
                <el-form-item label="路由名称" prop="routename">
                    <el-input v-model="form.routename"></el-input>
                </el-form-item>
                <el-form-item label="路由路径" prop="routepath">
                    <el-input v-model="form.routepath"></el-input>
                </el-form-item>
                <el-form-item label="组件路径" prop="component">
                    <el-input v-model="form.component"></el-input>
                </el-form-item>
                <el-form-item label="显示">
                    <el-switch v-model="form.status"></el-switch>
                </el-form-item>
                <el-form-item label="菜单名称" prop="menuname">
                    <el-input v-model="form.menuname"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标">
                    <el-input v-model="form.menuicon"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editMenus">保存</el-button>
                    <el-button @click="$router.push({ name: 'MenusIndex' })">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script>
import { getMenu, editMenus } from "@/api/menus";
export default {
    data() {
        return {
            form: {
                status: false,
                menuicon: '',
                group: []
            },
            rules:{
                menuname:[{ required: true, message: "不能为空" }],
                routename:[{ required: true, message: "不能为空" }],
                routepath:[{ required: true, message: "不能为空" }],
                component:[{ required: true, message: "不能为空" }],
            },
        };
    },
    async created() {
        await this.getMenu()
    },
    methods: {
        async getMenu() {
            const { data } = await getMenu(this.$route.query.id)
            // console.log(data);
            this.form = data
        },
        async editMenus() {
            await editMenus(this.$route.query.id, {
                routename: this.form.routename,
                routepath: this.form.routepath,
                component: this.form.component,
                status: this.form.status,
                group: this.form.group,
                menuname: this.form.menuname,
                menuicon: this.form.menuicon,
            })
            localStorage.removeItem("menus");
            this.$router.push({ name: 'MenusIndex' })
        }
    },
};
</script>
  